import React from 'react'
import './style/user.css'
import { useState } from 'react'
import { Popup } from 'antd-mobile'
import Function from './component/Function'
import caidan from './img/caidan.png'
import { useEffect } from 'react'
import axios from '../utils/http'
import { minBbox } from 'face-api.js'


export default function user() {

    const [visible3, setVisible3] = useState(false)

    const [classification] = useState([
        {
            id: 1,
            title: '视频',
            num: true
        },
        {
            id: 2,
            title: '喜欢',
            num: true
        },
        {
            id: 3,
            title: '资料',
            num: false
        },
    ])

    const hendelMore = () => {
        setVisible3(true)
    }

    const [num, setNum] = useState(1)

    const hendelNum = (id) => {
        setNum(id)
    }

    const [list, setList] = useState([])
    const handleVideo = async () => {
        const res = await axios.get('/yjr/videoModel')
        if (res.code == 200) {
            setList(res.video)
        }
    }

    useEffect(() => {
        handleVideo()
    }, [])
    return (
        <div className='yjr-box'>
            <div className='yjr-stg'><img src={caidan} style={{ width: '3rem', height: '3rem', margin: "1rem" }} onClick={() => hendelMore()} /></div>
            <div className='yjr-header'>
                <div className='yjr-tou'>
                    <img src={JSON.parse(localStorage.getItem('user'))[0].imgUrl || "https://ts1.cn.mm.bing.net/th/id/R-C.f624aab0b2044eacb6276c84071af24f?rik=uoe0Tit1CpWiRA&riu=http%3a%2f%2fwww.qqtn.com%2fup%2f2014-6%2f14020352105872816.jpg&ehk=0tGkxWm4xtnnHPJ36NfJSQ7PNlLQNkjKEUYL%2bLIfRYs%3d&risl=&pid=ImgRaw&r=0"} style={{ width: '100%', height: '100%', borderRadius: "50rem" }} />
                </div>
                <div className='title'>
                    <div style={{ display: 'flex' }}>
                        <p style={{ color: 'white', fontSize: "2.5rem" }}>{JSON.parse(localStorage.getItem('user'))[0].username || '杨博凯'}</p>
                        <p className='v1'>V1</p>
                    </div>
                    <h2>
                        <span>ID: 233232</span>
                        <span className='no-approve'>未认证</span>
                    </h2>
                    <div className='yjr-div'>
                        <h2>粉丝: 654</h2>
                        <h2>关注: 555K</h2>
                    </div>
                </div>
            </div>
            <div className='yjr-title'>
                Yoshiko带你看遍全球夜景
            </div>
            <div className='yjr-body'>
                <div className='yjr-classification'>
                    {
                        classification.map(item => {
                            return (
                                <div key={item.id} onClick={() => hendelNum(item.id)} className={`yjr-body-div ${item.id == num ? 'yjr-action' : ''}`}>
                                    {item.title}{
                                        item.num ? <span>
                                            {item.id == 1 ? <span>({list.length})</span> : <span>({list.filter(item => item.thumbsUp > 0).length})</span>}
                                        </span> : null
                                    }
                                </div>
                            )
                        })
                    }
                </div>


                <div>
                    {
                        num == 1 ?
                            <div className='bigDiv1'>
                                <div className='yjr-video'>
                                    {
                                        list.map(item => {
                                            return (
                                                <div className='yjr-video-one' key={item._id}>
                                                    <video style={{ width: '100%', height: '100%', objectFit: 'cover' }} src={item.videoUrl[0]}></video>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div> : null
                    }

                    {
                        num == 2 ? <div className='bigDiv2'>
                            <div className='yjr-video1'>
                                <div>
                                    {
                                        list.map(item => {
                                            return (
                                                Number(item.thumbsUp) > 0 ? <div className='yjr-video-two' key={item._id}>
                                                    <video style={{ width: '100%', height: '100%', objectFit: 'cover' }} src={item.videoUrl[0]}></video>
                                                </div> : null
                                            )
                                        })
                                    }
                                </div>

                            </div>
                        </div> : null
                    }

                    {
                        num == 3 ?
                            <div className='bigDiv3'>
                                <div className='yjr-content'>
                                    <h1>个人信息</h1>
                                    <p>昵称: {JSON.parse(localStorage.getItem('user'))[0].username || '杨博凯'}</p>
                                    <p>手机号: {JSON.parse(localStorage.getItem('user'))[0].rel || '18134007115'}</p>
                                </div>
                            </div> : null
                    }
                </div>


            </div>
            <Popup
                visible={visible3}
                onMaskClick={() => {
                    setVisible3(false)
                }}
                position='right'
                bodyStyle={{ width: '60vw', backgroundColor: '#191919' }}
            >
                <Function></Function>
            </Popup>
        </div>
    )
}
